<h1 class="custom">List group</h1>

<div class="row">
  <div class="col-sm-6">
    <div class="list-group">
      <a href="#" class="list-group-item active">
        <span class="badge">14</span>
        Cras justo odio
      </a>
      <a href="#" class="list-group-item">
        <span class="badge">14</span>
        Cras justo odio
      </a>
      <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
      <a href="#" class="list-group-item">Morbi leo risus</a>
      <a href="#" class="list-group-item">Porta ac consectetur ac</a>
      <a href="#" class="list-group-item disabled">Cras justo odio</a>
      <a href="#" class="list-group-item">Vestibulum at eros</a>
      <a href="#" class="list-group-item">Consectetur at facilisis</a>
    </div>

    <ul class="list-group">
      <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
      <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
      <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
      <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
    </ul>
  </div>

  <div class="col-sm-6">
    <div class="list-group">
      <a href="#" class="list-group-item active">
        <h4 class="list-group-item-heading">List group item heading</h4>
        <p class="list-group-item-text">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id nunc ut risus ultrices vulputate.
        </p>
      </a>
      <a href="#" class="list-group-item">
        <h4 class="list-group-item-heading">List group item heading</h4>
        <p class="list-group-item-text">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id nunc ut risus ultrices vulputate.
        </p>
      </a>
      <a href="#" class="list-group-item">
        <h4 class="list-group-item-heading">List group item heading</h4>
        <p class="list-group-item-text">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id nunc ut risus ultrices vulputate.
        </p>
      </a>
      <a href="#" class="list-group-item disabled">
        <h4 class="list-group-item-heading">List group item heading</h4>
        <p class="list-group-item-text">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id nunc ut risus ultrices vulputate.
        </p>
      </a>
    </div>

    <div class="list-group">
      <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
      <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
      <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
      <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
    </div>
  </div>
</div>
